<template>
  <div>
    {{newNum}}
  </div>
</template>
<script>
import gsap from "gsap"
import {
  formatFuc
} from '@/utils/commonality'

export default {
  name: "CountTo",
  props: {
    value: {
      type: Number,
      default: () => 0,
    },
  },
  data() {
    return {
      formatFuc
    }
  },
  mounted() {
    this.AnimateToValue()
  },
  computed: {
    newNum () {
      if (this.value > 10000) {
        return formatFuc(this.value.toFixed(2)) + 'w';
      } else {
        return formatFuc(this.value.toFixed(2));
      }
    }
  },
  methods: {
    AnimateToValue() {
      gsap.to(this.$data, {
        duration: 1,
        num: this.value,
      })
    },
  },
  //监听数据是否改变，改变就重新渲染
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.AnimateToValue()
      },
      immediate: true,
      deep: true,
    }
  }
}
</script>
